<script>
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import debounce from '@/sheep/helper/debounce';
  import sheep from '@/sheep';

  export default {
    name: 's-friend-new',
    methods: {
      debounce,
      async agreeToJoin(info, index) {
        console.log('同意家庭申请信息 =>', info);
        let { code, msg } = await sheep.$api.user.updateFriendStatus({
          friend_id: info.data.data[7].value,
          status: 1,
        });
        if (code == 1) {
          this.$emit('agreeToJoin', index);
          this.$refs[`applyForFamilyMembership`][index].close();
          if (index != this.applyForFamilyMembership.length - 1) {
            this.$refs[`applyForFamilyMembership`][index + 1].open();
          }
        } else {
          sheep.$helper.toast(msg);
        }
      },
      async closeJoin(index) {
        this.$refs[`applyForFamilyMembership`][index].close();
        let { code, msg } = await sheep.$api.user.updateFriendStatus({
          friend_id: info.data.data[7].value,
          status: 2,
        });
        if (index != this.applyForFamilyMembership.length - 1) {
          this.$refs[`applyForFamilyMembership`][index + 1].open();
        }
      },
    },
    components: { ImageAvater, UniPopup },
    props: {
      // 申请加入家庭列表
      applyForFamilyMembership: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    watch: {
      applyForFamilyMembership: {
        deep: true,
        handler(newVal, oldVal) {
          console.log('监听到的信息', newVal);
          if (newVal.length > 0) {
            this.$nextTick(() => {
              this.$refs.applyForFamilyMembership[0].open();
            });
          }
        },
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').nc_image_path;
      },
      nc_image(){
        return sheep.$store('AI').nc_image
      }
    },
  };
</script>

<template>
  <view class="applyForFamilyMembership">
    <uni-popup :ref="`applyForFamilyMembership`"
               v-for="(item,index) in applyForFamilyMembership"
               :mask-click="true"
               :key="index"
               type="bottom"
    >
      <view class="w-full bg_FFFFFF flex flex-column align-center"
            style="border-radius: 20rpx 20rpx 0 0"
      >
        <view class="wh_750 hW_115 flex align-center justify-between"
              style="border-radius: 20rpx 20rpx 0 0;background: #FFF8E8;"
        >
          <view class="fs_48 color_4B4B4B fw_500 ml_20">添加好友</view>
          <image class="wh_32 hW_32 mr_20" :src="`${IMG_URL}/nc_image_close_balck.png`"
                 @click.stop="closeJoin(index)"></image>
        </view>
        <view class="hW_20"></view>
        <view class="wh_702 hW_207 flex align-center" style="background: #FFF8E8;border-radius: 8rpx">
          <image :src="item.data.data[3].value.indexOf('http') != -1 ? item.data.data[3].value : `${nc_image}${item.data.data[3].value}`"
                 class="wh_130 hW_130 ml_20"
                 style="border-radius: 50%;"
          ></image>
          <view class="ml_40 mr_20">
            <view class="fs_31 color_4B4B4B fw_500">
              {{ item.data.data[0].value }}
            </view>
            <view class="fs_27 fw_500 color_9F9F9F">
              拾亲号: {{ item.data.data[7].value }}
            </view>
            <view class="fs_27 fw_500 color_9F9F9F">
              手机号: {{ item.data.data[9].value }}
            </view>
          </view>
        </view>
        <view class="hW_20"></view>
        <view class="wh_243 hW_80 bg_FF4206 flex align-center justify-center fs_32 color_FFFFFF fw_500"
              style="border-radius: 41rpx"
              @click.stop="agreeToJoin(item,index)"
        >
          同意
        </view>
        <view class="hW_50"></view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">

</style>